<app-common-bar (create)="create()" (refresh)="load()" (search)="search($event)" [loading]="loading" noView>
  <button type="button" nz-button nzType="primary" (click)="import()">
    <i nz-icon nzType="upload"></i>
    导入
  </button>
</app-common-bar>

<nz-table
  nzSize="small"
  [nzData]="datum"
  [nzFrontPagination]="false"
  [nzLoading]="loading"
  [nzTotal]="total"
  [nzPageSize]="pageSize"
  [nzPageIndex]="pageIndex"

  (nzQueryParams)="onQuery($event)"
>
  <thead>
  <tr>
    <th nzColumnKey="id" [nzSortFn]="true">ID</th>
    <th nzColumnKey="group" [nzSortFn]="true">分组</th>
    <th nzColumnKey="name" [nzSortFn]="true">名称</th>
    <th nzColumnKey="version" [nzSortFn]="true">版本</th>
    <th nzColumnKey="created" [nzSortFn]="true">创建时间</th>
    <th nzWidth="100">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of datum; let i=index" (dblclick)="open(data)">
    <td>{{ data.id }}</td>
    <td>{{ data.group }}</td>
    <td>{{ data.name }}</td>
    <td>{{ data.version }}</td>
    <td [title]="data.created|dateString">{{data.created | fromNow}}</td>
    <td>
      <a [routerLink]="'/admin/component/detail/'+data.id">详情</a>
      <nz-divider nzType="vertical"></nz-divider>
      <a [routerLink]="'/admin/component/edit/'+data.id">编辑</a>
      <nz-divider nzType="vertical"></nz-divider>
      <a nz-dropdown [nzDropdownMenu]="menu" nzTrigger="click">
        更多
        <i nz-icon nzType="down"></i>
      </a>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item nzDanger nz-popconfirm nzPopconfirmTitle="确定删除？" (nzOnConfirm)="remove(data, i)">删除</li>
        </ul>
      </nz-dropdown-menu>
    </td>
  </tr>
  </tbody>
</nz-table>

